<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>游戏</title>
</head>

<style>
    body{

        font-family: "微软雅黑";
    }
    #main{
        width: 1500px;
        height: 700px;
        background-image: url("images/readyBg.jpg");
        background-position: bottom;
        margin: 0 auto;
        overflow: hidden;
    }
    #direction{
        margin-left: 50px;
        margin-top: 50px;
        width: 120px;
        height: 60px;
    }
    #space, #enter{
        display: block;
        margin-left: 50px;
        margin-top: 20px;
    }
    #boom, #exp{
        display: block;
        margin-left: 50px;
    }
    #boom{
        margin-top: 30px;
    }
    #exp{
        margin-top: 50px;
    }
    #start{
        width: 220px;
        height: 40px;
        display: block;
        margin-left: 250px;
        margin-top: 30px;
    }
    #startimg{
        width: 220px;
        height: 40px;
    }
    .text1{
        color: red;
        font-size: 30px;
    }

</style>



<body onkeydown="playerMoveStateTrue()" onkeyup="playerMoveStateFalse()">
<div id="main">
    <div id="startPage">
        <div id="direction"><img src="images/help/Help.png"></div>
        <div id="space"><img src="images/help/Help1.png" ><span class="text1">长按</span>空格键攻击</div>
        <div id="enter"><img src="images/help/Help2.png" >伤害有<span class="text1">延迟</span><p>开局送三个，且用且珍惜</p></div>
        <div id="boom"><img src="images/help/boom.gif" >一个格子一个大招</div>
        <div id="exp"><img src="images/help/exp.gif" >此乃<span class="text1">经验瓶</span>经验满了后，会进化，游戏时间90s哦</div>
        <div id="start"><img src="images/start.gif" id="startimg" onclick="startGame()"></div>
    </div>
</div>

<script>

    var smallDinosaurList=new Array();
    var player;//创建玩家
    var leftState=false;
    var rightState=false;
    var topState=false;
    var downState=false;
    var hubList=["images/enemy/ghost/move.gif","images/enemy/bird/move.gif","images/enemy/plane/move.gif"];
    function startGame() {
        var startPage = document.getElementById("startPage");
        var main = document.getElementById("main");
        startPage.style.display = "none";
        main.style.backgroundImage = "url(images/bg.jpg)"
        window.setInterval(createEnemy, 800);
        setInterval(smallDinosaurMove,150);
        player=new playerPlan("images/dragon/small/move.gif");
        setInterval(playMove,10);

    }
    function playMove(){
        if(leftState==true){
            player.leftMove();
        }
        if(topState==true){
            player.topMove();
        }
        if(rightState==true){
            player.rightMove();
        }
        if(downState==true){
            player.downMove();
        }
    }
    function playerMoveStateTrue(){
        var e=window.event||arguments[0];//获取按键对应数值
        if(e.keyCode==38){
            topState=true;
        }
        if(e.keyCode==39){
            rightState=true;
        }
        if(e.keyCode==40){
            downState=true;
        }
        if(e.keyCode==37){
            leftState=true;
        }
    }
    function playerMoveStateFalse(){
        var e=window.event||arguments[0];//获取按键对应数值
        // console.log(e.keyCode);//在控制台打印出对应按键的数值
        if(e.keyCode==38){
            topState=false;
        }
        if(e.keyCode==39){
            rightState=false;
        }
        if(e.keyCode==40){
            downState=false;
        }
        if(e.keyCode==37){
            leftState=false;
        }
    }
    // 创建小恐龙
    function createEnemy() {
        // 小恐龙地址的传值
        var hu=this.hubList[Math.floor(Math.random() * this.hubList.length)];
        var sp = new enemy(hu);
        // 执行一次初始化的过程
        sp.init()
        // window.setInterval(sp.init, 300);
        smallDinosaurList.push(sp);

    }
    function smallDinosaurMove(){
        for(var i=0;i<smallDinosaurList.length;i++){
            smallDinosaurList[i].move();
        }
    }


    function enemy(e_image) {
        // 创建一个小恐龙的节点
        this.imageNode = document.createElement("img");
        // 通过形参获取图片路径
        this.imageSrc = e_image;
        // 血槽， 假设开机10滴血
        this.blood = 10;
        // 设置小恐龙的速度, 随机产生 一到十
        this.speed = parseInt(Math.random()*10) + 1;
        // 以背景图宽度为限制
        this.x = parseInt(Math.random()*10)+1450;
        // 小恐龙出现位置，-是因为从外面产生
        this.y = -parseInt(Math.random()*600)+600;
        // 小恐龙的整体初始化
        // this.x=1000;
        // this.y=300;
        this.init = function (){
            // 初始化节点路径
            this.imageNode.src = this.imageSrc
            // 初始化样式
            this.imageNode.style.position = "absolute";
            // 初始化位置
            this.imageNode.style.left = this.x + "px";
            this.imageNode.style.top = this.y + "px";
            // 获取main节点
            var mainObj = document.getElementById("main");
            // 把小恐龙内容添加到main节点中
            mainObj.appendChild(this.imageNode);
        }
        this.move=function (){
            //创建move方法
            this.imageNode.style.left=parseInt(this.imageNode.style.left)-this.speed+"px";
        }
    }
    //    这是分割线,现在开始写玩家
    function playerPlan(imgSrc){
        this.imageNode=document.createElement("img");
        this.imageSrc=imgSrc;
        this.x=200;
        this.y=400;
        this.speed=5;
        this.init=function (){
            this.imageNode.src=this.imageSrc;//初始化节点路径
            this.imageNode.style.position="absolute";//初始化样式
            this.imageNode.style.left=this.x+"px";
            this.imageNode.style.top=this.y+"px";
            var mainObj=document.getElementById("main");//获取main节点
            mainObj.appendChild(this.imageNode);//把小飞机内容添加到main节点中
        };
        this.leftMove=function (){
            this.imageNode.style.left=parseInt(this.imageNode.style.left)-this.speed+"px";

        }
        this.rightMove=function (){
            this.imageNode.style.left=parseInt(this.imageNode.style.left)+this.speed+"px";

        }
        this.topMove=function (){
            this.imageNode.style.top=parseInt(this.imageNode.style.top)-this.speed+"px";
        }
        this.downMove=function (){
            this.imageNode.style.top=parseInt(this.imageNode.style.top)+this.speed+"px";
        }
        this.shot=function (){
            //射击
        };
        this.init();
    }

</script>

</body>
</html>
